<template>
  <div>
    <!-- <svg>
      <use xlink:href="#icon-fullscreen" />
    </svg> -->
    <svg-icon v-if="isFull" icon-class="exit-fullscreen" class="myicon" @click="handleClick" />
    <svg-icon v-else icon-class="fullscreen" class="myicon" @click="handleClick" />

  </div>
</template>

<script>
import ScreenFull from 'screenfull'

export default {
  name: 'ScreenFull',
  data() {
    return {
      isFull: false
    }
  },
  methods: {
    handleClick() {
      // 实现全屏功能
      // ScreenFull.toggle()
      if (ScreenFull.isEnabled) {
        // 支持
        ScreenFull.toggle()
        this.isFull = !this.isFull
      } else {
        this.$message.error('你的浏览器版本太低, 不支持全屏')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.myicon {
  // width: 90px;
  // height: 90px;
  fill: white;
  cursor: pointer;
}

</style>
